<template>
  <header class="header">
    <h1>TodoList</h1>
    <input 
      type="checkbox" 
      id="toggle-all" 
      class="toggle-all"
      v-model="isAll"
    >

    <label for="toggle-all"></label>

    <input 
      type="text" 
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="task"

      @keydown.enter="addFn"

    >
  </header>
</template>

<script>
export default {
  data() {
    return {
      task:''
    }
  },
  methods: {
    addFn(){
      this.$emit('add',this.task)
      this.task = ''
    }
  },
  props:['list'],
  computed:{
    isAll:{
      get(){
        return this.list.every(p => p.isDone === true)
      },
      set(checked){
        this.list.forEach(p => p.isDone = checked)
      }
    }
  }
}
</script>

<style>

</style>